<template>
	<view class="post-detail">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<uni-icons type="back" size="20" color="#333"></uni-icons>
				</view>
				<view class="nav-center">
					<text class="nav-title"></text>
				</view>
				<view class="nav-right" @click="showMore">
					<uni-icons type="more-filled" size="20" color="#333"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 主内容区域 -->
		<scroll-view class="content-scroll" scroll-y="true">
			<!-- 帖子内容组件 -->
			<PostContent :post-detail="postDetail" :image-list="imageList" :tags="tags" @preview-image="previewImage" />

			<!-- 作者信息和互动数据组件 -->
			<AuthorStats :author-info="authorInfo" :stats="statsData" :is-followed="isFollowed"
				:show-edit="isCurrentUserAuthor" @author-click="goToUserProfile" @follow="toggleFollow"
				@edit="handleEditPost" />

			<!-- 评论区域组件 -->
			<Comment ref="commentRef" :post-id="postDetail.id" @comment-count-change="handleCommentCountChange"
				@reply-comment="handleReplyComment" @to-user="handleToUser" />

			<!-- 底部占位 -->
			<view class="bottom-placeholder" :style="{ height: bottomBarHeight + 'rpx' }"></view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar" v-show="showBottomBar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
			<view class="comment-input" @click="showCommentInput">
				<text class="input-placeholder">说点什么...</text>
			</view>
			<view class="action-buttons">
				<view class="action-btn" @click="toggleLike">
					<uni-icons :type="isLiked ? 'heart-filled' : 'heart'" :color="isLiked ? '#ff4757' : '#666'"
						size="24"></uni-icons>
				</view>
				<view class="action-btn" @click="toggleFavorite">
					<uni-icons :type="isFavorited ? 'star-filled' : 'star'" :color="isFavorited ? '#ffa502' : '#666'"
						size="24"></uni-icons>
				</view>
				<view class="action-btn" @click="sharePost">
					<uni-icons type="redo" color="#666" size="24"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 评论输入弹窗 -->
		<uni-popup ref="commentPopup" type="bottom" @change="onPopupChange">
			<view class="comment-popup">
				<view class="popup-header">
					<text class="popup-title">{{ isReplyMode ? `回复${replyTarget?.userName}` : '写评论' }}</text>
					<text class="popup-close" @click="hideCommentInput">取消</text>
				</view>
				<view class="popup-content">
					<textarea class="comment-textarea" v-model="commentText"
						:placeholder="isReplyMode ? `回复${replyTarget?.userName}...` : '说点什么...'" :focus="showKeyboard"
						:adjust-position="false" maxlength="500"></textarea>
					<view class="popup-footer">
						<text class="char-count">{{ commentText.length }}/500</text>
						<button class="send-btn" :disabled="!commentText.trim()" @click="sendComment">发布</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { getPost, togglePostLike, togglePostFavorite } from '@/api/post/post'
	import type { PostBasicInfo } from '@/api/post/post'
	import { getInfoByPostId } from '@/api/tag/tag'
	import { getUserByUserId } from '@/api/system/user'
	import type { TagsInfo } from '@/api/tag/tag.ts'
	import Comment from './components/Comment.vue'
	import AuthorStats from './components/AuthorStats.vue'
	import PostContent from './components/PostContent.vue'
	// 添加 Pinia store 导入
	import { usePostStore } from '@/store/modules/post'
	import useUserStore from '@/store/modules/user'

	// 初始化 Pinia store
	const postStore = usePostStore()
	const userStore = useUserStore()

	// 系统信息
	const statusBarHeight = ref(0)
	const safeAreaBottom = ref(0)
	const showKeyboard = ref(false)
	const showBottomBar = ref(true)  // 添加这行，控制底部操作栏显示
	const commentPopup = ref(null)  // 添加这行

	// 添加回复相关的响应式数据
	const isReplyMode = ref(false)
	const replyTarget = ref(null)
	const parentComment = ref(null)

	// 帖子详情数据
	const postDetail = ref<PostBasicInfo>({
		id: 0,
		postCode: '',
		circleId: 0,
		authorUserId: 0,
		postTitle: '',
		postContent: '',
		likeCount: 0,
		commentCount: 0,
		favoriteCount: 0,
		isDraft: 0,
		aiAuditStatus: 0,
		aiAuditReason: '',
		aiAuditTime: '',
		createdBy: '',
		createdTime: '',
		updatedBy: '',
		updatedTime: '',
		deletedFlag: 0,
		postImages: '',
		coverImage: ''
	})

	// 图片列表
	const imageList = ref<string[]>([])

	// 标签
	const tags = ref<TagsInfo[]>([])

	const getPostTags = async (postId : number) => {
		try {
			const res = await getInfoByPostId(postId)
			const getTags = res.data

			// 如果API返回了标签信息，使用它
			if (getTags && Array.isArray(getTags) && getTags.length > 0) {
				tags.value = getTags
			}
		} catch (error) {
			console.error('获取标签信息失败:', error)
		}
	}

	// 作者信息
	const authorInfo = ref({
		id: 0,
		nickname: '',
		avatar: ''
	})

	// 计算统计数据 - 供AuthorStats组件使用
	const statsData = computed(() => ({
		likeCount: postDetail.value.likeCount,
		commentCount: postDetail.value.commentCount,
		favoriteCount: postDetail.value.favoriteCount
	}))

	// 修改 isCurrentUserAuthor 计算属性，添加调试信息
	const isCurrentUserAuthor = computed(() => {
		const authorId = Number(postDetail.value.authorUserId)
		const currentUserId = userStore.user.userId
		const isAuthor = authorId === currentUserId
		return isAuthor
	})

	// 评论相关
	const commentText = ref('')
	const commentRef = ref<InstanceType<typeof Comment> | null>(null)

	// 状态
	const isLiked = ref(false)
	const isFavorited = ref(false)
	const isFollowed = ref(false)

	// 获取系统信息
	const getSystemInfo = () => {
		const systemInfo = uni.getSystemInfoSync()
		statusBarHeight.value = systemInfo.statusBarHeight || 0
		safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
	}

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	// 显示更多选项
	const showMore = () => {
		uni.showActionSheet({
			itemList: ['举报', '不感兴趣'],
			success: (res) => {
				console.log('选择了：', res.tapIndex)
			}
		})
	}

	// 页面加载时获取参数
	onLoad((options) => {
		if (options?.id) {
			const postId = parseInt(options.id)
			console.log("获取的id", postId)
			Promise.all([
				// 直接调用获取帖子详情的逻辑，而不是调用不存在的 getPostDetail 函数
				getPostDetailData(postId),
				getPostTags(postId),
				// 确保获取用户点赞数据
				postStore.fetchUserLikedPosts(),
				postStore.fetchUserFavoritePosts()
			]).then(() => {
				// 在数据加载完成后，根据 store 中的数据设置点赞状态
				updatePostLikedStatus(postId)
				updatePostFavoriteStatus(postId)
			}).catch(error => {
				console.error('页面数据加载失败:', error)
			})
		}
	})

	// 获取帖子详情数据的函数
	const getPostDetailData = async (id : number) => {
		try {
			// 调用传入的getPost函数获取帖子数据
			const res = await getPost(id)
			const postData : PostBasicInfo = res.data

			// 使用获取到的数据更新postDetail，确保所有字段都符合PostBasicInfo类型
			postDetail.value = {
				id: postData.id || id,
				postCode: postData.postCode || '',
				circleId: postData.circleId || 0,
				// 确保 authorUserId 是 number 类型
				authorUserId: Number(postData.authorUserId) || 0,
				postTitle: postData.postTitle || '',
				postContent: postData.postContent || '',
				// 添加新字段
				postImages: postData.postImages || '',
				coverImage: postData.coverImage || '',
				likeCount: postData.likeCount || 0,
				commentCount: postData.commentCount || 0,
				favoriteCount: postData.favoriteCount || 0,
				isDraft: postData.isDraft || 0,
				aiAuditStatus: postData.aiAuditStatus || 0,
				aiAuditReason: postData.aiAuditReason || '',
				aiAuditTime: postData.aiAuditTime || '',
				createdBy: postData.createdBy || '',
				createdTime: postData.createdTime || '',
				updatedBy: postData.updatedBy || '',
				updatedTime: postData.updatedTime || '',
				deletedFlag: postData.deletedFlag || 0
			}

			const postAuthorInfoRes = getUserByUserId(postData.authorUserId)
			const postAuthorInfo = (await postAuthorInfoRes).data

			// 如果getUserByUserId返回了作者信息，使用它；否则使用默认值
			if (postAuthorInfo) {
				authorInfo.value = {
					id: postAuthorInfo.id,
					nickname: postAuthorInfo.nickName || '',
					avatar: postAuthorInfo.avatar 
				}
			} else {
				// 使用默认作者信息
				authorInfo.value = {
					id: postData.authorUserId || 1,
					nickname: '小红薯123',
					avatar: ''
				}
			}

			// 注意：不要在这里设置 isLiked，因为我们要从 Pinia store 获取
			// isFavorited.value = postData.isFavorited || false
			isFollowed.value = postData.isFollowed || false

			// 图片处理
			if (postData.images && Array.isArray(postData.images)) {
				imageList.value = postData.images
			} else {
				// 使用默认图片
				imageList.value = []
			}

			// 修改图片处理逻辑
			const processedImages = processPostImages(postData)
			imageList.value = processedImages

		} catch (error) {
			console.error('获取帖子详情失败：', error)
			uni.showToast({
				title: '加载失败',
				icon: 'error'
			})
		}
	}

	// 添加图片处理方法
	const processPostImages = (postData : any) : string[] => {
		const images : string[] = []

		// 1. 优先使用封面图
		if (postData.coverImage && postData.coverImage.trim()) {
			images.push(postData.coverImage)
		}

		// 2. 处理postImages字段
		if (postData.postImages && postData.postImages.trim()) {
			try {
				const postImagesArray = JSON.parse(postData.postImages)
				if (Array.isArray(postImagesArray)) {
					// 按order排序并提取url
					const sortedImages = postImagesArray
						.filter(img => img.url && img.url.trim())
						.sort((a, b) => (a.order || 0) - (b.order || 0))
						.map(img => img.url)

					// 如果没有封面图，使用第一张图片作为封面
					if (!postData.coverImage && sortedImages.length > 0) {
						images.push(...sortedImages)
					} else if (postData.coverImage) {
						// 如果有封面图，添加其他图片（排除重复的封面图）
						const otherImages = sortedImages.filter(url => url !== postData.coverImage)
						images.push(...otherImages)
					}
				}
			} catch (error) {
				console.error('解析postImages失败:', error)
			}
		}

		// 3. 如果没有任何图片，尝试从内容中提取（向后兼容）
		if (images.length === 0 && postData.postContent) {
			const contentImages = extractImagesFromContent(postData.postContent)
			if (contentImages.length > 0) {
				images.push(...contentImages)
			}
		}

		return images
	}

	// 从内容中提取图片的辅助方法（向后兼容）
	const extractImagesFromContent = (content : string) : string[] => {
		const images : string[] = []
		const imgRegex = /<img[^>]+src=["']([^"']+)["'][^>]*>/gi
		let match

		while ((match = imgRegex.exec(content)) !== null) {
			images.push(match[1])
		}

		return images
	}

	// 添加图片预览方法
	const previewImage = (current : string, index : number) => {
		uni.previewImage({
			current: current,
			urls: imageList.value,
			success: () => {
				console.log('图片预览成功')
			},
			fail: (error) => {
				console.error('图片预览失败:', error)
				uni.showToast({
					title: '图片加载失败',
					icon: 'none'
				})
			}
		})
	}

	// 添加根据 store 数据更新点赞状态的方法
	const updatePostLikedStatus = (postId : number) => {
		// 使用 Pinia store 的 getter 来判断是否点赞
		isLiked.value = postStore.isPostLiked(postId)
		console.log(`帖子 ${postId} 的点赞状态:`, isLiked.value)
	}

	// 添加根据 store 数据更新收藏状态的方法
	const updatePostFavoriteStatus = (postId : number) => {
		// 使用 Pinia store 的 getter 来判断是否收藏
		isFavorited.value = postStore.isPostFavorite(postId)
		console.log(`帖子 ${postId} 的收藏状态:`, isFavorited.value)
	}

	// 修改切换点赞方法，使用 Pinia store
	const toggleLike = async () => {
		try {
			// 使用 Pinia store 的 toggleLike 方法
			const success = await postStore.toggleLike(postDetail.value.id)

			if (success) {
				// 更新本地 UI 状态
				isLiked.value = !isLiked.value
				if (isLiked.value) {
					postDetail.value.likeCount++
				} else {
					postDetail.value.likeCount--
				}
			} else {
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('点赞操作失败:', error)
			uni.showToast({
				title: '操作失败，请重试',
				icon: 'none'
			})
		}
	}

	// 切换收藏
	const toggleFavorite = async () => {
		try {
			// 使用 Pinia store 的 toggleFavorite 方法
			const success = await postStore.toggleFavorite(postDetail.value.id)

			if (success) {
				// 更新本地 UI 状态
				isFavorited.value = !isFavorited.value
				if (isFavorited.value) {
					postDetail.value.favoriteCount++
				} else {
					postDetail.value.favoriteCount--
				}
			} else {
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('点赞操作失败:', error)
			uni.showToast({
				title: '操作失败，请重试',
				icon: 'none'
			})
		}
	}

	// 切换关注 - 处理AuthorStats组件的关注事件
	// 在script setup中添加导入
	import { addFollow, delFollow, getFollowedByFansId, type UserFollow, type UserFollowVO } from '@/api/follow/follow'

	// 处理编辑帖子 - 处理AuthorStats组件的编辑事件
	const handleEditPost = () => {
		// 检查是否是当前用户的帖子
		// 检查用户是否已登录
		if (!userStore.user || !userStore.user.userId) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			return
		}

		// 使用宽松比较，避免类型不匹配问题
		if (postDetail.value.authorUserId != userStore.user.userId) {
			uni.showToast({
				title: '只能编辑自己的帖子',
				icon: 'none'
			})
			return
		}

		// 跳转到编辑页面，传递帖子ID
		uni.navigateTo({
			url: `/pages/post/editPost?id=${postDetail.value.id}`
		})
	}

	// 分享帖子
	const sharePost = () => {
		uni.share({
			provider: 'weixin',
			type: 0,
			title: postDetail.value.postTitle,
			summary: postDetail.value.postContent,
			success: () => {
				uni.showToast({
					title: '分享成功'
				})
			}
		})
	}

	// 显示评论输入框
	const onPopupChange = (e) => {
		if (e.show) {
			// 弹窗打开时隐藏底部操作栏
			showBottomBar.value = false
			showKeyboard.value = true
		} else {
			// 弹窗关闭时显示底部操作栏
			showBottomBar.value = true
			showKeyboard.value = false
		}
	}

	// 简化 showCommentInput 方法
	const showCommentInput = () => {
		// 重置为普通评论模式
		isReplyMode.value = false
		replyTarget.value = null
		parentComment.value = null
		commentPopup.value?.open()
	}

	// 新增处理回复评论的方法
	const handleReplyComment = (comment, parent = null) => {
		isReplyMode.value = true
		replyTarget.value = comment
		parentComment.value = parent || comment
		commentPopup.value?.open()
	}

	// 隐藏评论输入框
	const hideCommentInput = () => {
		showKeyboard.value = false
		showBottomBar.value = true
		commentPopup.value?.close()
		// 重置回复状态
		isReplyMode.value = false
		replyTarget.value = null
		parentComment.value = null
		commentText.value = ''
	}

	// 发送评论
	const sendComment = async () => {
		if (!commentText.value.trim()) return

		try {
			if (isReplyMode.value && replyTarget.value) {
				// 发送回复
				const newReply = {
					id: Date.now().toString(),
					commentCode: `C${Date.now()}`,
					postId: postDetail.value.id.toString(),
					commenterUserId: '',
					parentCommentId: parentComment.value?.id || null,
					replyToUserId: replyTarget.value.commenterUserId,
					commentContent: commentText.value.trim(),
					likeCount: 0,
					isDraft: 0,
					aiAuditTime: null,
					createdBy: '',
					createdTime: new Date().toISOString(),
					updatedBy: null,
					updatedTime: new Date().toISOString(),
					userName: '我',
					userAvatar: '/static/images/avatar.jpg',
					isLiked: false,
					replyToUserName: replyTarget.value.userName
				}

				// 调用Comment组件的addReply方法
				if (commentRef.value) {
					commentRef.value.addReply(parentComment.value.id, newReply)
				}

				uni.showToast({
					title: '回复成功'
				})
			} else {
				// 发送普通评论
				if (commentRef.value) {
					commentRef.value.addComment({
						commentContent: commentText.value
					})
				}

				uni.showToast({
					title: '评论成功'
				})
			}

			hideCommentInput()
		} catch (error) {
			console.error('发送失败:', error)
			uni.showToast({
				title: isReplyMode.value ? '回复失败' : '评论失败',
				icon: 'error'
			})
		}
	}

	// 处理评论数量变化
	const handleCommentCountChange = (count : number) => {
		postDetail.value.commentCount = count
	}

	// 跳转到用户主页 - 处理AuthorStats组件的作者点击事件
	const goToUserProfile = () => {
		uni.navigateTo({
			url: `/pages/author/authorDetail?id=${postDetail.value.authorUserId}`
		})
	}

	const handleToUser = (userId : number) => {
		uni.navigateTo({
			url: `/pages/author/authorDetail?id=${userId}`
		})
	}

	onMounted(() => {
		getSystemInfo()
	})

	// 添加底部操作栏高度计算
	const bottomBarHeight = computed(() => {
		return 120 + safeAreaBottom.value // 底部操作栏基础高度 + 安全区域高度
	})

	// 添加刷新数据的方法
	const refreshPostData = async () => {
		if (postDetail.value.id) {
			try {
				// 重新加载帖子数据
				await Promise.all([
					getPostDetailData(postDetail.value.id),
					getPostTags(postDetail.value.id),
					// 更新用户点赞和收藏状态
					postStore.fetchUserLikedPosts(),
					postStore.fetchUserFavoritePosts()
				])
				
				// 更新状态
				updatePostLikedStatus(postDetail.value.id)
				updatePostFavoriteStatus(postDetail.value.id)
				
				console.log('帖子数据已刷新')
			} catch (error) {
				console.error('刷新帖子数据失败:', error)
			}
		}
	}

	// 页面显示时刷新数据
	onShow(() => {
		console.log('postDetail页面显示，刷新数据')
		refreshPostData()
	})

	// 修改toggleFollow方法，实现真正的关注功能
	const toggleFollow = async (newFollowState: boolean) => {
		try {
			// 检查用户是否已登录
			if (!userStore.user || !userStore.user.userId) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return
			}
			

			// 不能关注自己
			if (postDetail.value.authorUserId === userStore.user.userId) {
				uni.showToast({
					title: '不能关注自己',
					icon: 'none'
				})
				return
			}

			const followData: UserFollow = {
				followedUserId: postDetail.value.authorUserId,
				fansId: userStore.user.userId
			}

			if (newFollowState) {
				// 关注用户
				const res = await addFollow(followData)
				if (res.code === 200) {
					isFollowed.value = true
					uni.showToast({
						title: '关注成功'
					})
				} else {
					uni.showToast({
						title: res.msg || '关注失败',
						icon: 'none'
					})
				}
			} else {
				// 取消关注
				const res = await delFollow(followData)
				if (res.code === 200) {
					isFollowed.value = false
					uni.showToast({
						title: '已取消关注'
					})
				} else {
					uni.showToast({
						title: res.msg || '取消关注失败',
						icon: 'none'
					})
				}
			}
		} catch (error) {
			console.error('关注操作失败:', error)
			uni.showToast({
				title: '操作失败，请重试',
				icon: 'none'
			})
		}
	}

	// 添加检查关注状态的方法
	const checkFollowStatus = async () => {
		try {
			// 如果用户未登录或者是作者本人，不需要检查关注状态
			if (!userStore.user || !userStore.user.userId || postDetail.value.authorUserId === userStore.user.userId) {
				isFollowed.value = false
				return
			}

			// 获取当前用户的关注列表
			const res = await getFollowedByFansId(userStore.user.userId)
			if (res.code === 200 && res.data) {
				const followList: UserFollowVO[] = res.data
				// 检查是否已关注当前帖子的作者
				isFollowed.value = followList.some(follow => follow.followedUserId === postDetail.value.authorUserId)
			}
		} catch (error) {
			console.error('获取关注状态失败:', error)
		}
	}

	// 修改onLoad方法，添加关注状态检查
	onLoad((options) => {
		if (options?.id) {
			const postId = parseInt(options.id)
			console.log("获取的id", postId)
			Promise.all([
				// 直接调用获取帖子详情的逻辑，而不是调用不存在的 getPostDetail 函数
				getPostDetailData(postId),
				getPostTags(postId),
				// 确保获取用户点赞数据
				postStore.fetchUserLikedPosts(),
				postStore.fetchUserFavoritePosts()
			]).then(() => {
				// 在数据加载完成后，根据 store 中的数据设置点赞状态
				updatePostLikedStatus(postId)
				updatePostFavoriteStatus(postId)
				// 检查关注状态
				checkFollowStatus()
			}).catch(error => {
				console.error('页面数据加载失败:', error)
			})
		}
	})
</script>

<style lang="scss">
	.post-detail {
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	// 自定义导航栏
	.custom-navbar {
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;

		.navbar-content {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;


			.nav-left,
			.nav-right {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.nav-center {
				flex: 1;
				text-align: center;

				.nav-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
				}
			}
		}
	}

	// 主内容区域
	.content-scroll {
		flex: 1;
		margin-top: 132rpx; // 导航栏高度 + 状态栏高度
	}

	// 底部操作栏
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top: 1rpx solid #f0f0f0;
		padding: 24rpx 32rpx;
		display: flex;
		align-items: center;
		z-index: 1000;

		.comment-input {
			flex: 1;
			background-color: #f8f8f8;
			border-radius: 32rpx;
			padding: 20rpx 32rpx;
			margin-right: 24rpx;

			.input-placeholder {
				color: #999;
				font-size: 26rpx;
			}
		}

		.action-buttons {
			display: flex;
			align-items: center;

			.action-btn {
				margin-left: 32rpx;
				padding: 8rpx;
			}
		}
	}

	// 评论弹窗
	.comment-popup {
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;
		padding: 32rpx;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;

			.popup-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}

			.popup-close {
				color: #666;
				font-size: 28rpx;
			}
		}

		.popup-content {
			.comment-textarea {
				width: 100%;
				min-height: 200rpx;
				background-color: #f8f8f8;
				border-radius: 16rpx;
				padding: 24rpx;
				font-size: 28rpx;
				margin-bottom: 24rpx;
				border: none;
				outline: none;
			}

			.popup-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.char-count {
					font-size: 24rpx;
					color: #999;
				}

				.send-btn {
					background-color: #ff4757;
					color: #fff;
					border: none;
					border-radius: 32rpx;
					padding: 16rpx 32rpx;
					font-size: 26rpx;

					&:disabled {
						background-color: #f0f0f0;
						color: #ccc;
					}
				}
			}
		}
	}
</style>